<template>
  <div class="work-body">
    <home-duty class="work-left"></home-duty>
    <div  class="work-right">
      <home-app></home-app>
      <my-calendar></my-calendar>
    </div>
  </div>
</template>
<script>
  import HomeDuty from "./components/HomeDuty";
  import HomeApp from './components/HomeApp'
  import MyCalendar from './components/MyCalendar'
  export default {
    components: {
      MyCalendar,
      HomeApp,
        HomeDuty},
    data() {
      return {
      };
    },
    mounted() {
    },
    created() {
    },
    computed:{
    },
    methods: {
    }
  };
</script>
<style lang="scss" scoped>
  .work-body {
      display: flex;
      width: 100%;
      .work-left {
          width:calc(61.8% - 10px);
          margin-right: 15px;
          flex: 1;
      }
      .work-right {
          width: 500px;
          margin-right: 15px;
      }
  }
  @media screen and (max-width:1100px) {
      .work-body {
          display: inline-block;
          .work-left {
              width: 100%;
            margin-right: 15px;
          }
          .work-right {
              width: 100%;
            margin-left: 15px;
            margin-right: 15px;
          }
      }
  }
</style>
